<template>
    <section class="ml-wrapper ml-install-step">
        <div class="container">
            <div class="title ml-title"><h2 class="">使用Malus加速方法</h2>
                <div class="quote">Malus 简单易用，只需三步即可轻松开启加速</div>
            </div>
            <div class="content">
                <div class="step">
                    <div class="number">1</div>
                    <div class="right">
                        <div class="name">下载安装</div>
                        <a class="des ml-game-btn">在你的设备下载并安装 Malus 加速器</a></div>
                </div>
                <div class="arrow"></div>
                <div class="step">
                    <div class="number">2</div>
                    <div class="right">
                        <div class="name">免费注册</div>
                        <a class="des ml-game-btn">使用邮箱注册、或直接使用三方登录进入应用</a></div>
                </div>
                <div class="arrow"></div>
                <div class="step">
                    <div class="number">3</div>
                    <div class="right">
                        <div class="name">一键开启加速</div>
                        <a class="des ml-game-btn">点击加速按钮，重启需要加速的应用即可</a></div>
                </div>
                <a href="/r/guide" target="_blank" class="detail">查看详细安装教程</a></div>
        </div>
    </section>
</template>

<script>
export default {
    name: "InstallStep",
    data() {
        return {}
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .ml-install-step {
        .title {
            h2 {
                font-size: 32px!important;
            }
        }
        .content {
            flex-direction: column;
            align-items: flex-start!important;
            padding: 0!important;
            background: 0 0!important;
            border: 0!important;
            .step {
                margin-bottom: 32px!important;
                .right {
                    .des {
                        max-width: 100%!important;
                    }
                }
            }
            .arrow {
                display: none!important;
            }
            .detail {
                display: none!important;
            }
        }
    }
}

.ml-install-step {
    margin-top: 100px;

    .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        h2 {
            font-size: 40px;
            display: inline-block;
            text-align: center;
            position: relative;
            color: #222;
        }

        .quote {
            text-align: center;
            margin-top: 16px;
            color: #666;
        }
    }

    .content {
        margin-top: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FAFAFF;
        border: 5px solid #F7F7FF;
        padding: 56px 56px 64px;
        border-radius: 200px;
        position: relative;

        .step {
            display: flex;
            align-items: center;
            justify-content: center;

            .number {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                border: 2px solid #4D55E8;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #4D55E8;
                font-size: 40px;
                font-weight: 500;
                flex-shrink: 0;
            }

            .right {
                margin-left: 24px;

                .name {
                    font-size: 20px;
                    color: #222;
                }

                .des {
                    display: block;
                    margin-top: 8px;
                    font-size: 13px;
                    color: #7b7b7b;
                    cursor: pointer;
                    transition: all .2s ease;
                    line-height: 1.6;
                    max-width: 160px;
                    background-color: transparent;
                }
            }
        }

        .arrow {
            display: block;
            width: 118px;
            height: 9px;
            background: url(../assets/arrow.27cdd.svg) no-repeat;
            background-size: contain;
            bottom: 0;
        }

        .detail {
            position: absolute;
            font-size: 12px;
            padding: 4px 12px;
            border-radius: 50px 50px 0 0;
            background: #EDEDFF;
            color: #555;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            max-width: 189px;
            text-align: center;
            transition: all .2s ease;
        }
    }
}
</style>
